<script setup lang="ts">
import { ref, watch, onMounted } from "vue"
import { SlidezCanvas } from "./dev/sliderz"
import imageSrc from "./dev/image.jpeg"

const instance = ref<SlidezCanvas>()

onMounted(() => {
  instance.value = new SlidezCanvas({
    container: document.querySelector("#container")!,
    imageSrc,
    maxSplit: 30,
    bezierCtrls: {
      a: { x: -650, y: -800, z: 50 },
      b: { x: -650, y: -800, z: 50 },
      c: { x: -1300, y: -1600, z: 100 },
    },
  })
  console.log("app mounted")
})

const split = ref(6)
const progress = ref(0)

watch(progress, (newVal) => {
  instance.value?.setProgress(newVal)
})
</script>

<template>
  <div>
    <div class="slidez-container" id="container"></div>
    <div id="ctrls">
      划分数量：{{ split }}
      <input type="range" v-model="split" min="2" max="9" step="1" />
      动画进度：{{ progress }}
      <input type="range" v-model="progress" />
    </div>
  </div>
</template>

<style>
html,
body {
  margin: 0;
}

#ctrls {
  position: fixed;
  left: 12px;
  top: 12px;
  background: #fff6;
  padding: 9px;
  display: grid;
  grid-template-columns: 120px auto;
}

.slidez-container {
  position: relative;
  overflow: hidden;
}

.triangle {
  /* 移除transition，避免与JS动画冲突 */
  transform-origin: center;
  will-change: transform; /* 提示浏览器优化 */
}
</style>
